<template>
  <div class="page">
    <!--  #ifdef  H5 -->
    <video id="myVideo"  class="video" object-fit="cover" :controls="false" muted :autoplay="true" :show-center-play-btn="false" :enable-progress-gesture="false" :style="{width:windowWidth+'px',height:windowHeight+'px'}"></video>
    
    <!--  #endif -->
    
    <!--  #ifdef  MP-WEIXIN -->
    <live-player id="livePlayer" class="livePlayer" mode="live" src="rtmp://push.cdzer.com/live/81642241?txSecret=6416c62ecdbd7876b7587b05cb002a10&txTime=61D53D5E" autoplay @statechange="statechange" @error="error" :style="{width:windowWidth+'px',height:windowHeight+'px'}" object-fit="fillCrop" />
    <!--  #endif -->
    <div class="playerPanel" >
      <div class="identification">
        <span class="left">{{appName}}直播</span>
        <span class="rightID">ID:{{userInfo.room}}</span>
      </div>
      <div class="head w-flex" @click.stop="$u.route({url:'pagesC/home/personage/personage',params:{userId:userInfo.shop_id}})">
        <div class="avatarwrap" @click.stop="toShop(userInfo.shop_id)">
          <image class="avatar" :src="userInfo.shop_logo"></image>
          <div class="info" @click.stop="toShop(userInfo.shop_id)">
            <p class=" shopname">{{userInfo.shop_name}}</p>
            <p class="seenum">在线人数{{ userInfo.online_num }}</p>
          </div>
          <span class="attentionBtn" @click="changeAtten">{{ userInfo.is_follow ===  1 ? '已关注': '关注' }} </span>
        </div>
      
      </div>
      
      <scroll-view class="liveSayWrap" scroll-y="true" scroll-with-animation="true" @scroll="liveScroll" @scrolltolower="scrolltolower" scroll-into-view="">
        <div class="tipwrap">
          {{ userInfo.system_notice }}
        </div>
        <div v-for="(item, index) in msgList" :key="index" class="item">
          <div class="item-item" :class="[item.username ? 'tip-scroller__msg--active' : '']">
            <text class="" v-if="item.username">{{ item.username ? item.member_rank : '' }}</text>
            <text class="" v-if="item.username">{{ item.username ? item.rank : '' }}</text>
            <p class="username">
              <image class="tagimg" mode="widthFix" src="/static/images/icon-newfans@3x.png"></image>
              <span   @click="liveRoomMonitoring(item)">  {{ item.username ? item.username + ': ' : '' }}</span>
            </p>
            <text class="" v-for="(text, i) in item.msg" :key="i"> {{ text }}</text>
          </div>
        </div>
      </scroll-view>
      
      <div class="footerWrap w-flex">
        <div class="w-flex">
          <div class="goodsImgWrap">
            <image class="goods" src="/static/images/live/icon-liveBaby.png" @click="letGoodsShow"></image>
            <span class="num" v-if="liveGoodsList.length">
                        {{liveGoodsList.length?liveGoodsList.length:''}}
                    </span>
          </div>
          <input type="text" v-model="inputValue" confirm-type="send"  @confirm="send" maxlength="20" class="sayInput" name="input" placeholder="说点什么吧..." placeholder-class="sayInputP" />
        </div>
        <div class="w-flex">
          <button class="shareButton" open-type="share">
            <u-image width="60" height="60"  style="opacity: 0.7"  src="/static/images/icon-share.png"></u-image>
          </button>
          <div>
            <image class="appraise " @click="praiseAction" src="/static/images/praiseIcon/icon-appraise.png"></image>
          </div>
        </div>
      </div>
    </div>
    
    <!-- 商品属性选择组件 -->
    <u-popup mode="bottom" ref="goodsAttrPopUp" border-radius="16" >
      <goodsAttar :propObj="goodsInfo" :GoodsAttrs="goodsInfo.radioattr"></goodsAttar>
    </u-popup>
    
    <!--  #ifndef  MP-WEIXIN -->
    <u-popup mode="bottom" ref="sharePopUp" class="shareWrap"  border-radius="16" >
      <div class="wrap">
        <div class="shareItem" @click="sharePoster">
          <image class="shareIconWrap" mode="widthFix" src="/static/images/icon-shareLiveroom.png"></image>
          <p class="shareTit">分享直播间</p>
        </div>
      </div>
    </u-popup>
    <!--  #endif -->
    
    <u-popup mode="center" v-model="isBannedPanelShow" width="80%" border-radius="8">
      <div class="u-flex u-col-center avatarBox">
        <u-avatar :src="currUserInfo.headimgurl"></u-avatar>
        <p class="avatarBoxName">确认<span style="color:#f44336">{{banradio}}</span> 用户:{{currUserInfo.username}}</p>
      </div>
      <div class="bannerdAction">
        <u-form-item >
          <u-radio-group v-model="banradio">
            <u-radio v-for="(item, index) in radioList" :key="index" :name="item.name" :disabled="item.disabled">
              {{ item.name }}
            </u-radio>
          </u-radio-group>
        </u-form-item>
        <u-button type="success" @click="banConfirm">确定</u-button>
      </div>
    </u-popup>
    
    <!--  直播间商品列表组件-->
    <liveGoodsList ref="liveGoodsPopup" :goodsList="liveGoodsList" />
    
    
    <div class="-warp">
      <image class="like-image" :class="[item.active ? 'like-active' : '']" src="/static/images/live/icon-liveBaby.png" v-for="(item, index) in likeList" :key="index"></image>
    </div>
    <div class="praise_bubble">
      <div v-for="(item, index) in appraiseList" :key="index" class="bubble" :class="[item.srcB,item.animaB]" :data-t="item.time">
      </div>
    </div>
    
    <u-toast ref="uToast" />
  </div>
</template>

<script>
import {
  goodsAttar
} from '@/components/goodsAttar';
import liveGoodsList from "./components/liveGoodsList";
//  #ifdef  H5
// flvjs如何使用:
import flvjs from 'flv.js'
// #endif

let  client_id;

import  {APPNAME,LIVESOKECT}  from '../config/index';
export default {
  data() {
    return {
      pullUrl: '',
      appName:'',
      context: null,
      shopid: '',
      likeList: [],
      windowWidth: uni.getSystemInfoSync().screenWidth,
      windowHeight: uni.getSystemInfoSync().screenHeight-70,
      userInfo: {},
      liveGoodsList: [],
      liveCustomerList: [],
      commentsList: [],
      currLikeIndex: -1,
      inputValue: '',
      token: '',
      msgList: [],
      userAvatarList: [],
      isShowAction: true,
      currUserInfo: {},
      goodsInfo: {},
      offsetTop: 0,
      appraiseList: [],
      isBannedPanelShow:false,   //是否显示   直播间管理面板
      banradio:'拉黑',
      radioList: [
        {
          name: '拉黑',
          disabled: false
        },
        {
          name: '禁言',
          disabled: false
        }
      ],
    }
  },
  
  components: {
    goodsAttar,
    liveGoodsList
  },
  onShareAppMessage(res) {
    if (res.from === 'button') {// 来自页面内分享按钮
      console.log(res.target)
    }
    return {
      title: 'WoShop 直播种草电商',
      path: `/platforms/live-player?shop_id=${this.shopid}`
    }
  },
  async onLoad(option) {
    this.appName = APPNAME
    uni.request({
    	url: 'https://dsx.cdzer.com/api/Job/job_details', //仅为示例，并非真实接口地址。
    	method: 'POST',
    	data:{
    		job_id:1
    	},
    	header: {
    		'content-type': 'application/x-www-form-urlencoded',
    	},
    	success: (res) => {
    		console.log(res,"招聘职位列表")
    		// this.zlist = res.data.data
    	}
    });
   

    this.$loading('加载中')
    client_id = uni.getStorageSync('client_id');
    this.shopid = await option.shop_id   //获取店铺id
    this.token = await uni.getStorageSync('token')  // 获取用户token
    await this.getAliveinformation()  //根据店铺id获取店铺详情信息
    this.getLiveGoodsList()   //根据店铺id获取直播间商品列表
    
    // #ifdef MP-WEIXIN
    uni.setKeepScreenOn({
      keepScreenOn: true
    })
    this.context = uni.createLivePlayerContext("livePlayer", this)
    await this.context.play()
    uni.hideLoading();
    // #endif
    
 
    //  点赞轮询动画  在页面hook:beforeDestroy时销毁
    let setpraiseAction  = setInterval(() => {
      this.praiseAction()
    }, 500)
    this.$on('hook:beforeDestroy',()=>{
      clearInterval(setpraiseAction);
      
    })
    this.$hideLoading()
  },
  
  
  methods: {
    //分享海报
    sharePoster() {
      //获取带参数二维码
      this.is_show_model = false
      this.$refs.poster.showCanvas('')
      this.$refs.sharePopUp.close()
    },
    praiseAction() {
      
      const randomA = Math.floor(Math.random() * 6) + 1;
      const randomB = Math.floor(Math.random() * 11) + 1; // bl1~bl11
      const time = new Date().getTime()
      
      const srcB = `b${randomA}`;
      const animaB = `bl${randomB}`;
      let data = {
        srcB,
        animaB,
        time
      }
      this.appraiseList.push(data)
      let index = this.appraiseList.length
      if(index>20){
        this.appraiseList.splice(10,index-1)
      }
    },
    
    send() {
      if (!this.inputValue) {
        uni.showToast({
          title: '发言不能为空',
          duration: 2000,
          icon: 'none'
        });
        return false;
      }
      uni.sendSocketMessage({
        data: JSON.stringify({
          type: 'alivesay',
          msgtype: 'text',
          id: this.token,
          room: this.userInfo.room,
          msg: this.inputValue,
          client_id
        })
      });
      this.inputValue = ''
    },
    
    getLiveRoomServiceList() {
      let data = {
        shop_id: this.shopid
      }
      this.$http.getLiveRoomServiceList(data).then(res => {
        if (res.status === 200) {
          this.customerList = res.data.data;
        }
      })
    },
    getAliveinformation() {
      let data = {
        shop_id: this.shopid
      }
      this.$http.getAliveinformation(data).then(Res => {
        if (Res.status === 200) {
          console.log('直播间信息'+Res)
          this.userInfo = Res.data;
          this.pullUrl = Res.data.addressitem
          
          this.initWebSokcet( Res.data.room)
          //  #ifdef H5
         
            this.openPlayer(Res.data.addressitem)
        
     
          // #endif
        }
      })
    },
    openPlayer(url){
      const checkObj = new Map([
          [flvjs.isSupported && url,],
      ])
      if (flvjs.isSupported && url) {
          const videoEle = document.getElementsByClassName("uni-video-video")[0]
          const flvPlayer = flvjs.createPlayer({
            type: 'flv',
            url,
          });
          flvPlayer.attachMediaElement(videoEle);
          flvPlayer.load();
          flvPlayer.play();
      }else{
         this.$toast('暂无直播或直播回放')
      }
    },
    statechange(e) {
      console.log('live-player code:', e.detail.code)
    },
    error(e) {
      console.error('live-player error:', e.detail.errMsg)
    },
    
    getgoodsinfo(item) {
      this.$refs.PopUp.close()
      let data = {
        goods_id: item.id,
        fangshi: 1,
      }
      this.$http.getgoodsinfo(data).then(res => {
        if (res.status === 200) {
          this.goodsInfo = res.data || {}
          
          this.$refs.goodsAttrPopUp.open()
        }
      })
    },
    previewCommentImg(imgs, index) {
      // 预览图片
      
      uni.previewImage({
        urls: imgs,
        current: index,
        longPressActions: {
          itemList: ['发送给朋友', '保存图片', '关注'],
          success: function (data) {
            console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
          },
          fail: function (err) {
            console.log(err.errMsg);
          }
        }
      });
    },
    liveScroll(e) {
      console.log(e)
    },
    scrolltolower(e) {
      this.offsetTop = e.currentTarget.offsetTop
    },
    letCustomerShow() {
      this.$refs.customerPopUp.open()
    },
    liveRoomMonitoring(data) {
      if (data.block_type !==0) return ;
      const role =  uni.getStorageSync('role') || ''; //管理员角色身份
      const list = ['shop','service']  //商家和客服身份有拉黑 禁言等直播间管理权限
      if (!list.includes(role)) return;
      if (data.username && data.role === 'user') {
        this.currUserInfo = data;
        this.isBannedPanelShow = true;
      }
    },
    openBuyerPop() {
      this.$refs.buyerPopUp.open()
    },
    go2bottom() {
    
    },
    letsharePopUp() {
      this.$refs.sharePopUp.open()
    },
    
    // 获取直播间商品列表信息
    letGoodsShow() {
      this.$refs.liveGoodsPopup.goodsPopShow = true
    },
    getLiveGoodsList() {
      let data = {
        page: 1,
        shop_id:this.shopid
      }
      this.$http.getLiveGoodsList(data).then(Res => {
        if (Res.status === 200) {
          this.liveGoodsList = Res.data.data;
        }
        
      })
    },
    initWebSokcet( room) {
      uni.onSocketOpen(res=>{
        console.log('直播间WebSocket连接已打开！');
        uni.sendSocketMessage(
            JSON.stringify({
              type: 'ping',
              id: this.token
            })
        );
      });
      /*
      *   直播间首次建立socket:   发送{data} 简历直播间websocket链接
      *   bindalive_id：  直播间绑定id
      *   token：         用户token
      *   room：          房间号，由直播间详情页接口生成 （this.$http.getAliveinformation）
      *   client_id:      客户端标示
      * */
      uni.sendSocketMessage({
        data: JSON.stringify({
          type: 'bindalive_id',
          id: this.token,
          room: room,
          client_id
        })
      });
      uni.onSocketMessage(res => {
        console.log(JSON.stringify(res.data));
        const data = JSON.parse(res.data)
        if (data.type === 'alivesay') {
          this.msgList.push(data.data);
          this.$nextTick(() => {
            setTimeout(() => {
              // this.go2bottom();
            }, 50);
          });
        }
        
        if (data.type === 'notice') {
          this.msgList.push({
            msg: data.msg
          });
          this.userAvatarList.unshift(data.data.headimgurl);
          this.$nextTick(() => {
            setTimeout(() => {
              this.go2bottom();
            }, 50);
          });
        }
        
      })
      
      
    },
    async  banConfirm(){
      // 单场禁言：type:2         永久禁言(拉黑)：type:3
      const map = new Map([
        ['禁言',{name:'禁言',type:2}],
        ['拉黑',{name:'拉黑',type:3}],
      ])
      const audience = this.currUserInfo
      const mapGet = map.get(this.banradio)
      await uni.sendSocketMessage({
        data:JSON.stringify({
          type: 'blockUser',
          id: this.token,
          shopid: this.shopid,
          userid: audience.user_id,
          room: this.userInfo.room,
          blockType: mapGet.type
        })})
      this.isBannedPanelShow=false
      this.$refs.uToast.show({
        title: `${audience.username}已被${mapGet.name}`,
        type: 'success',
      })
    },
    
    
    linkTo(url) {
      uni.navigateTo({
        url,
        animationType: 'pop-in'
      });
    },
    // 跳到商品详情页
    toGoodsDetali(goodsid) {
      uni.navigateTo({
        url: '/pagesC/homeSon/goodsDetails?id=' + goodsid,
        animationType: 'slide-in-right',
        animationDuration: 300
      });
    },
    changeAtten() {
      if (this.userInfo.is_follow === 0) {
        this.getshopcoll()
      } else {
        this.getshopcancelcoll()
      }
    },
    getshopcoll() {
      this.$http.getshopcoll({
        shop_id: this.shopid
      }).then(res => {
        if (res.status === 200) {
          this.$toast(res.mess)
        }
      })
    },
    getshopcancelcoll() {
      this.$http.getshopcancelcoll({
        shop_id: this.shopid
      }).then(res => {
        if (res.status === 200) {
          this.$toast(res.mess)
        }
      })
    },
    
    toShop(shop_id) {
      uni.navigateTo({
        url: '/pagesC/home/personage/personage?userId=' + this.shopid,
        animationType: 'slide-in-right',
        animationDuration: 300
      });
    }
  }
}
</script>

<style lang="scss" scoped>
page {
  position: absolute;
  top: 0;
  bottom: 0;
  overflow: hidden;
}

.page {
  color: #fff;
  overflow: hidden;
  
}

.playerPanel {
  position: fixed;
  top: 0;
  bottom: 0;
  overflow: hidden;
  left:0;
  right: 0;
  font-size: 28upx;
  /*  #ifdef  H5 */
  padding-top: 80upx;
  
  /*  #endif  */
  .head {
    padding:5upx  18upx;
    
    .avatarwrap {
      display: inline-flex;
      align-items: center;
      background: rgba(#fff, 0.2);
      padding: 4upx 10upx;
      border-radius: 400upx;
      
      .avatar {
        width: 60upx;
        height: 60upx;
        border-radius: 500upx;
      }
      
      .info {
        margin-left: 10upx;
        width:170upx;
        .shopname{
          font-size: 28upx;
          line-height: 1.3;
          font-weight: 800;
          color: #f1f1f1;
        }
        .seenum{
          font-size: 24upx;
          font-weight:nornal ;
          color: #eee;
        }
      }
    }
    
    .attentionBtn {
      background: linear-gradient(45deg, #fa3f3f, #fb8c43);
      border-radius: 100upx;
      padding: 0 18upx;
      font-size: 24upx;
      margin-left: 10upx;
      text-align: center;
      line-height: 55upx;
      height: 55upx;
      font-weight: 800;
    }
    
    .shopHead {
      border: 2upx solid #fff;
      text-align: center;
      margin: 0 40upx;
      border-radius: 10upx;
      
      p {
        font-size: 24upx;
        line-height: 1.4;
      }
      
      p:first-child {
        background: #fff;
        color: salmon;
        padding: 0 8upx;
      }
      
    }
    
  }
}

.footerWrap {
  position: fixed;
  bottom: 40upx;
  left: 0;
  right: 0;
  padding: 0 20upx;
  justify-content: space-between;
  
  .goods {
    width: 70upx;
    height: 80upx;
  }
  
  .goodsImgWrap {
    position: relative;
    
    .num {
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%,-30%);
      color: #fff;
      font-weight: 800;
    }
  }
  
  .sayInput {
    width: 320upx;
    background: rgba(black, 0.4);
    padding: 24upx 0 24upx 24upx;
    border-radius: 400upx;
    margin-left: 19upx;
    
  }
  
  .sayInputP {
    font-size: 28upx;
    font-weight: bold;
  }
  
  .appraise {
    width: 60upx;
    height: 60upx;
    
  }
}
.shareBtn{
  width: 56upx;
  
}
.reportBtn {
  height: 48upx;
  border-radius: 500upx;
  display: inline-block;
  text-align: center;
  line-height: 48upx;
  margin: 10upx;
  padding: 8upx 20upx;
  opacity: 0.7;
}

.w-flex {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.shareWrap {
  /*  #ifndef MP-WEIXIN  */
  padding:0 25upx;
  /*  #endif  */
  .wrap {
    display: flex;
    justify-content: space-around;
    
    .shareItem {
      text-align: center;
      color: #333;
      
      image {
        width: 160upx;
      }
    }
  }
  
}

/deep/ .uni-popup__wrapper-box {
  border-top-right-radius: 18upx;
  border-top-left-radius: 18upx;
  
}

.liveSayWrap {
  position: fixed;
  bottom: 150upx;
  left: 20upx;
  width: 500upx;
  overflow: hidden;
  height: 380upx;
  font-size: 24upx;
}

.tipwrap {
  @extend .item;
  color: #ff8534;
  border-radius: 8upx!important;
}
.tagimg {
  width: 50upx;
  margin: 0 8upx;
}

view {
  font-size: 24upx;
}

.item {
  background-color: rgba(black, 0.2);
  padding: 0upx 10upx;
  border-radius: 100upx;
  font-size: 24upx;
  margin-bottom: 10upx;
  
  &-item {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
  }
}

.username {
  color: #ff8534
}

.customer {
  display: flex;
  color: #333;
  position: relative;
  margin-top: 25upx;
  
  .avatar {
    width: 90upx;
    flex-shrink: 0;
    margin-right: 20upx;
  }
  
  .username {
    font-size: 30upx;
  }
  
  .tip {
    color: #999;
    font-size: 24upx;
  }
  
  .status {
    position: absolute;
    right: 0;
    top: 0;
    font-size: 24upx;
    
    .dot {
      width: 14upx;
      height: 14upx;
      border-radius: 100px;
      background: #2ccc40;
      display: inline-block;
      margin-right: 10upx;
    }
  }
}

.commentBox {
  display: flex;
  
  p {
    margin-left: 20upx;
    font-size: 24upx;
    color: #929292;
    background: rgba(#fff, 0.3);
    padding: 0 16upx;
    border-radius: 200px;
    line-height: 1.5;
  }
}

.buyerWrap {
  .buyer {
    color: #333;
    margin-bottom: 25upx;
    border-bottom: 2upx dashed #f5f5f5;
    padding-bottom: 20upx;
    
    .avatar {
      width: 90upx;
      flex-shrink: 0;
    }
    
    .info {
      flex: 1;
      margin-left: 20upx;
    }
    
    .time {
      font-size: 24upx;
      color: #999;
    }
    
    .describe {
      margin: 20upx;
      
      .quto {
        color: #999;
        font-size: 30upx;
        
      }
    }
    
    .imgwrap {
      display: flex;
      margin-left: 20upx;
      
      image {
        width: 100upx;
      }
    }
  }
}

.appraisenum {
  position: fixed;
  bottom: 120upx;
  right: 40upx;
  color: #ffa468
}

//点赞动画

$bubble_time:3s;
$bubble_scale:0.8s;

.praise_bubble {
  width: 100px;
  height: 200px;
  position: fixed;
  right: 0;
  bottom: 130upx;
}

.bubble {
  position: absolute;
  width: 40px;
  height: 40px;
  left: 30px;
  bottom: 0px;
  background-repeat: no-repeat;
  background-size: 100%;
  transform-origin: bottom;
}

.b1 {
  background-image: url('/static/images/praiseIcon/bg1.png');
  // 可以使用雪碧图
  // background-position: -42px -107px;
  // background-size: 188.5px 147px;
}

.b2 {
  background-image: url('/static/images/praiseIcon/bg2.png');
  // background-position: -84px -107px;
  // background-size: 188.5px 147px;
}

.b3 {
  background-image: url('/static/images/praiseIcon/bg3.png');
  // background-position: 0 -107px;
  // background-size: 188.5px 147px;
}

.b4 {
  background-image: url('/static/images/praiseIcon/bg4.png');
  // background-position: -45px -62px;
  // background-size: 188.5px 147px;
}

.b5 {
  background-image: url('/static/images/praiseIcon/bg5.png');
  // background-position: -107px -42px;
  // background-size: 188.5px 147px;
}

.b6 {
  background-image: url('/static/images/praiseIcon/bg6.png');
  // background-position: -107px 0;
  // background-size: 188.5px 147px;
}

.bl1 {
  animation: bubble_1 $bubble_time linear 1 forwards,
  bubble_big_1 $bubble_scale linear 1 forwards,
  bubble_y $bubble_time linear 1 forwards;
}

.bl2 {
  animation: bubble_2 $bubble_time linear 1 forwards,
  bubble_big_2 $bubble_scale linear 1 forwards,
  bubble_y $bubble_time linear 1 forwards;
}

.bl3 {
  animation: bubble_3 $bubble_time linear 1 forwards,
  bubble_big_1 $bubble_scale linear 1 forwards,
  bubble_y $bubble_time linear 1 forwards;
}

.bl4 {
  animation: bubble_4 $bubble_time linear 1 forwards,
  bubble_big_2 $bubble_scale linear 1 forwards,
  bubble_y $bubble_time linear 1 forwards;
}

.bl5 {
  animation: bubble_5 $bubble_time linear 1 forwards,
  bubble_big_1 $bubble_scale linear 1 forwards,
  bubble_y $bubble_time linear 1 forwards;
}

.bl6 {
  animation: bubble_6 $bubble_time linear 1 forwards,
  bubble_big_3 $bubble_scale linear 1 forwards,
  bubble_y $bubble_time linear 1 forwards;
}

.bl7 {
  animation: bubble_7 $bubble_time linear 1 forwards,
  bubble_big_1 $bubble_scale linear 1 forwards,
  bubble_y $bubble_time linear 1 forwards;
}

.bl8 {
  animation: bubble_8 $bubble_time linear 1 forwards,
  bubble_big_3 $bubble_scale linear 1 forwards,
  bubble_y $bubble_time linear 1 forwards;
}

.bl9 {
  animation: bubble_9 $bubble_time linear 1 forwards,
  bubble_big_2 $bubble_scale linear 1 forwards,
  bubble_y $bubble_time linear 1 forwards;
}

.bl10 {
  animation: bubble_10 $bubble_time linear 1 forwards,
  bubble_big_1 $bubble_scale linear 1 forwards,
  bubble_y $bubble_time linear 1 forwards;
}

.bl11 {
  animation: bubble_11 $bubble_time linear 1 forwards,
  bubble_big_2 $bubble_scale linear 1 forwards,
  bubble_y $bubble_time linear 1 forwards;
}

@keyframes bubble_11 {
  0% {}
  
  25% {
    margin-left: -10px;
  }
  
  50% {
    margin-left: -10px;
  }
  
  100% {
    margin-left: -18px;
  }
}

@keyframes bubble_10 {
  0% {}
  
  25% {
    margin-left: -20px;
  }
  
  50% {
    margin-left: -20px;
  }
  
  100% {
    margin-left: -20px;
  }
}

@keyframes bubble_9 {
  0% {}
  
  25% {
    margin-left: 10px;
  }
  
  50% {
    margin-left: 10px;
  }
  
  100% {
    margin-left: 10px;
  }
}

@keyframes bubble_8 {
  0% {}
  
  25% {
    margin-left: 20px;
  }
  
  50% {
    margin-left: 20px;
  }
  
  100% {
    margin-left: 20px;
  }
}

@keyframes bubble_7 {
  0% {}
  
  25% {
    margin-left: 3px;
  }
  
  50% {
    margin-left: 1px;
  }
  
  75% {
    margin-left: 2px;
  }
  
  100% {
    margin-left: 3px;
  }
}

@keyframes bubble_6 {
  0% {}
  
  25% {
    margin-left: -3px;
  }
  
  50% {
    margin-left: -1px;
  }
  
  75% {
    margin-left: -2px;
  }
  
  100% {
    margin-left: -3px;
  }
}

@keyframes bubble_5 {
  0% {}
  
  25% {
    margin-left: 5px;
  }
  
  50% {
    margin-left: -5px;
  }
  
  75% {
    margin-left: -10px;
  }
  
  100% {
    margin-left: -20px;
  }
}

@keyframes bubble_4 {
  0% {}
  
  25% {
    margin-left: -5px;
  }
  
  50% {
    margin-left: -5px;
  }
  
  75% {
    margin-left: 20px;
  }
  
  100% {
    margin-left: 10px;
  }
}

@keyframes bubble_3 {
  0% {}
  
  25% {
    margin-left: -20px;
  }
  
  50% {
    margin-left: 10px;
  }
  
  75% {
    margin-left: 20px;
  }
  
  100% {
    margin-left: -10px;
  }
}

@keyframes bubble_2 {
  0% {}
  
  25% {
    margin-left: 20px;
  }
  
  50% {
    margin-left: 25px;
  }
  
  75% {
    margin-left: 10px;
  }
  
  100% {
    margin-left: 5px;
  }
}

@keyframes bubble_1 {
  0% {}
  
  25% {
    margin-left: -8px;
  }
  
  50% {
    margin-left: 8px;
  }
  
  75% {
    margin-left: -15px;
  }
  
  100% {
    margin-left: 15px;
  }
}

@keyframes bubble_big_1 {
  0% {
    transform: scale(0.3);
  }
  
  100% {
    transform: scale(1.2);
  }
}

@keyframes bubble_big_2 {
  0% {
    transform: scale(0.3);
  }
  
  100% {
    transform: scale(0.9);
  }
}

@keyframes bubble_big_3 {
  0% {
    transform: scale(0.3);
  }
  
  100% {
    transform: scale(0.6);
  }
}

@keyframes bubble_y {
  0% {
    margin-bottom: 0;
  }
  
  10% {
    margin-bottom: 0;
  }
  
  75% {
    opacity: 1;
  }
  
  100% {
    margin-bottom: 200px;
    opacity: 0;
  }
}
.videoBox{
  position: absolute;
  top: 0;
  bottom: 0;
  width: 100%;
}
.identification{
  background-color: rgba(0,0,0,0.5);
  border-radius: 14upx;
  font-size: 20upx;
  overflow: hidden;
  margin:8upx 20upx;
  display: inline-flex;
  .left{
    background-color: #fff;
    border-radius: 12upx;
    color: #333;
    padding:0 12upx;
    display: inline-block;
    font-weight: 800;
  }
  .rightID{
    margin-left: 12upx;
  }
}
.u-line-1{
  overflow: hidden;
  text-overflow:ellipsis;
  white-space: nowrap;
}
.u-m-r-30{
  margin-right: 30upx;
}
.shareButton{
  background-color: transparent;border: none;
}
.bannerdAction{
  padding: 30upx;
  
}
.avatarBox{
  flex-direction: column;
  padding:30upx 0 0;
  .avatarBoxName{
    color: #333;
    font-size: 28upx;
  }
}
</style>
